<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
  <title>用户分析</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<body>
	<div class="data">
		<div class="chart">
			<div class="layui-row layui-col-space10">
			    <div class="layui-col-md6">
			    	<div class="cont">
			    		<div class="title">
				    		App基础指标-日活数
				    		<p>2018-05-1~2018-05-31 | 过去 30 天</p>
				    	</div>
				    	<div id="chart1" style="width: 100%;height: 300px;">
					
						</div>
			    	</div>
			    </div>
			    <div class="layui-col-md6">
			    	<div class="cont">
			    		<div class="title">
				    		App基础指标-放款金额
				    		<p>2018-05-1~2018-05-31 | 过去 30 天</p>
				    	</div>
				    	<div id="chart2" style="width: 100%;height: 300px;">
					
						</div>
			    	</div>
			    </div>
		  </div>
		</div>
	</div>
	<script type="text/javascript" src="./layui/layui.js"></script>
	<script type="text/javascript" src="js/echarts.js"></script>
	<script>
		layui.use(['jquery'], function(){
			var $=layui.jquery;
			// chart1
			var option1 = {
				tooltip : {
			        trigger: 'axis',
			        formatter:function(params){
		            	var dateArray = params[0].name.split("-");
		            	var date = new Date(2018, parseInt(dateArray[0] - 1), dateArray[1]);
					    return params[0].name+'('+"星期" + "日一二三四五六".charAt(date.getDay())+')'+'<br>'+params[0].marker+params[0].seriesName+'：'+params[0].value;
					},
			    },
			    grid: {y:'20',x:30},
			    legend: {
			        data:['App日活数'],
			        textStyle: {
			            color: '#b22c04',
			        },
			        formatter:function(name){
					    return '5月份'+name;
					},
			        bottom:10
			    },
			    xAxis: {
			        type: 'category',
		            axisLabel: {
		                interval:2
		            },
		            boundaryGap: false,
			        data: ['5-1','5-2','5-3','5-4','5-5','5-6','5-7','5-8','5-9','5-10']
			    },
			    yAxis: {
		            splitNumber: 3,
		            splitLine: {
		                show: true,
		                lineStyle:{
		                	type:'dashed'
		                }
		            }
			    },
			    series: [{
			    	name: 'App日活数',
			        data: [0,100,20,30,40,90,10,70,80,90],
			        type: 'line'
			    }]
			};
			echarts.init($('#chart1')[0]).setOption(option1);
			// chart2
			var option2 = {
				tooltip : {
			        trigger: 'axis',
			        formatter:function(params){
		            	var dateArray = params[0].name.split("-");
		            	var date = new Date(2018, parseInt(dateArray[0] - 1), dateArray[1]);
					    return params[0].name+'('+"星期" + "日一二三四五六".charAt(date.getDay())+')'+'<br>'+params[0].marker+params[0].seriesName+'：'+params[0].value;
					},
			    },
			    grid: {y:'20',x:50},
			    legend: {
			        data:['放款金额'],
			        textStyle: {
			            color: '#b22c04',
			        },
			        formatter:function(name){
					    return '5月份'+name;
					},
			        bottom:10
			    },
			    xAxis: {
			        type: 'category',
		            axisLabel: {
		                interval:0
		            },
		            boundaryGap: true,
			        data: ['5-1','5-2','5-3','5-4','5-5','5-6','5-7','5-8','5-9','5-10']
			    },
			    yAxis: {
			    	type: 'value',
		            splitNumber: 3,
		            splitLine: {
		                show: true,
		                lineStyle:{
		                	type:'dashed'
		                }
		            },
		            axisLabel: {
			            formatter:function(name){
						    return name+'万';
						}
			        }
			    },
			    series: [{
			    	name: '放款金额',
			        data: [50,100,20,30,40,90,10,70,80,90],
			        type: 'bar'
			    }]
			};
			echarts.init($('#chart2')[0]).setOption(option2);
		});
	</script> 
</body>
</html>